<template>
  <div class="freight">
    <el-card class="box-card" style="margin-top: 20px;">
    <el-button type="danger" @click="handleAdd">新增模板</el-button>
    <el-table  :data="tableData" style="width: 100%" stripe>
      <el-table-column prop="templateType" label="模板类型" width="200">
        </el-table-column>
        <el-table-column prop="transportType" label="运送类型">
        </el-table-column>
        <el-table-column prop="associatedCityList" label="关联城市">
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重"> </el-table-column>
        <el-table-column prop="continuousWeight" label="续重">
        </el-table-column>
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="{ row }">
            <el-row>
              <el-link :underline="false" type="primary" @click="handleEdit(row)">编辑</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" type="danger" @click="delFee(row.id)">删除</el-link>
            </el-row>
          </template>
        </el-table-column>
     </el-table>
   </el-card>
   <!-- 弹层 -->
   <el-dialog :title="title"  :visible.sync="showDialog" @close="close">
    <el-form label-width="100px" :model="form" :rules="rules" ref="formRef">
      <el-form-item label="模板类型" prop="templateType">
        <el-select
            placeholder="请选择模板类型"
            style="width: 100%"
            v-model="form.templateType"
          >
            <el-option
            v-for="(item,index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
            ></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="运送类型" prop="transportType">
        <el-select
            placeholder="请选择运送类型"
            style="width: 100%"
            v-model="form.transportType"
          >
          <el-option
          v-for="(item,index) in options1"
            :key="index"
            :label="item.label"
            :value="item.value"
            ></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="关联城市" prop="associatedCityList">
        <el-checkbox-group v-model="form.associatedCityList" v-if="title==='编辑模板'">
              <el-checkbox label="京津冀" name="associatedCityList"></el-checkbox>
              <el-checkbox label="江浙沪" name="associatedCityList"></el-checkbox>
              <el-checkbox label="川渝" name="associatedCityList"></el-checkbox>
              <el-checkbox label="黑吉辽" name="associatedCityList"></el-checkbox>
            </el-checkbox-group>
            <div v-else>{{ associatedCity }}</div>
        </el-form-item>
      <el-form-item label="首重价格" prop="firstWeight">
          <el-input placeholder="请输入首重价格" v-model="form.firstWeight">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input
            placeholder="请输入续重价格"
            v-model="form.continuousWeight">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input
            placeholder="请输入轻抛系数"
            v-model="form.lightThrowingCoefficient">
          </el-input>
        </el-form-item>
    </el-form>
    <template #footer>
        <el-row type="flex" justify="center">
          <el-button type="danger"
          class="btn1" @click="submit">确定</el-button>
          <el-button
          class="btn2" @click="close">取消</el-button>
        </el-row>
      </template>
   </el-dialog>
</div>
</template>

<script>
import { getfreightList, addfreightList, delFeeApi } from '@/api/freight'
const temType = {
  1: '同城寄',
  2: '省内互寄',
  3: '经济区互寄',
  4: '跨省'
}
const transType = {
  1: '普快',
  2: '特快'
}
const assCity = {
  1: '全国',
  2: '京津冀',
  3: '江浙沪',
  4: '川渝',
  5: '黑吉辽'
}
export default {
  name: 'FreiGht',
  data () {
    return {
      type: '',
      option: '',
      option1: '',
      showDialog: false,
      tableData: [],
      rules: {
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ],
        associatedCityList: [
          { required: true, message: '关联城市不能为空', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ]
      },
      options: [
        {
          value: 1,
          label: '同城寄'
        },
        {
          value: 2,
          label: '省内互寄'
        },
        {
          value: 3,
          label: '经济区互寄'
        },
        {
          value: 4,
          label: '跨省'
        }
      ],
      options1: [
        {
          value: 1,
          label: '普快'
        },
        {
          value: 2,
          label: '特快'
        }
      ],
      options2: [
        {
          value: 1,
          label: '全国'
        },
        {
          value: 2,
          label: '京津冀'
        },
        {
          value: 3,
          label: '江浙沪'
        },
        {
          value: 4,
          label: '川渝'
        }
      ],
      form: {
        templateType: '',
        transportType: '',
        associatedCityList: '',
        firstWeight: '',
        continuousWeight: '',
        lightThrowingCoefficient: ''
      },
      associatedCity: '全国'
    }
  },
  computed: {
    title () {
      return this.type === 'add' ? '新增模板' : '编辑模板'
    }
  },
  created () {
    this.getFeeList()
  },
  methods: {
    async getFeeList () {
      const res = await getfreightList()
      this.tableData = res.data
      this.tableData.forEach((item) => {
        item.templateType = temType[item.templateType]
        item.transportType = transType[item.transportType]
        item.associatedCityList = assCity[item.associatedCityList]
      })
      // console.log(this.tableData)
    },
    handleDialog () {
      this.showDialog = true
    },
    close () {
      this.$refs.formRef.resetFields()
      this.form = {
        templateType: '',
        transportType: '',
        associatedCityList: '',
        firstWeight: '',
        continuousWeight: '',
        lightThrowingCoefficient: ''
      }
      this.showDialog = false
      this.getFeeList()
    },
    async submit () {
      await this.$refs.formRef.validate()
      this.form.firstWeight = +this.form.firstWeight
      this.form.continuousWeight = +this.form.continuousWeight
      this.form.lightThrowingCoefficient = +this.form.lightThrowingCoefficient
      await this.$refs.formRef.validate()
      // 提交数据 => 调用新增接口
      await addfreightList(this.form)
      // 添加成功以后进行成功的提示
      this.$message.success('新增成功')
      this.close()
    },
    async delFee (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delFeeApi(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      this.getFeeList()
    },
    handleEdit (row) {
      this.type = 'edit'
      this.form = row
      // this.form.associatedCityList[0] = assCity[this.form.associatedCityList[0]]
      // console.log(this.form.associatedCityList)
      this.showDialog = true
    },
    handleAdd () {
      this.type = 'add'
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.freight {
  padding: 20px;
  background-color: #f3f4f7;
  padding-top: 23px;
}
.el-card__body {
  .el-button {
    margin-bottom: 20px;
    width: 100px;
    height: 40px;
    background: #E15536;
    border-radius: 4px;
  }
  padding: 28px 28px 28px 28px;
  .el-table {
    border: 1px solid #ebeef5;
    thead tr th {
      background: #f8faff;
    }
  }
  span {
    font-size: 13px;
 }
}
::v-deep .el-card__body {
  .el-button {
    margin-bottom: 20px;
  }
  padding: 28px 28px 28px 28px;
  .el-table {
    border: 1px solid #ebeef5;
    thead tr th {
      background: #f8faff;
    }
  }
}
::v-deep .el-dialog {
  width: 600px;
  transform: none;
  left: 0;
  position: relative;
  margin: auto;
  border-radius: 8px;
  .el-dialog__header {
    padding: 15px 30px 15px;
    background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
  }
  .el-dialog__body {
    padding: 40px 60px 0;
    padding-left: 0;
  }
  .el-input__suffix-inner {
    span {
      color: rgb(32, 35, 42);
      font-weight: 400;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      margin-right: 14px;
      line-height: 40px;
    }
  }
}
.btn1{
      background-color: #E15536;
      color: #ffffff;
      width: 90px;
      border-radius: 5px;
      font-weight: 400;
}
.btn2{
      width: 90px;
      color: #2a2929;
      border: 1px solid #d8dde3;
      border-radius: 5px;
      font-weight: 400;
}
</style>
